<template>
	<view class="content" :style="{'padding': type!=3 ? '0' : '8rpx 30rpx'}">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="查看稿件" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="top_c display-flex just-between" v-if="type!=3">
			<view class="text">
				根据订单例文展示内容阅前须知，在订单完成前您必须遵守相应条例，再次查看请点击右侧“再次查看”按钮。
			</view>
			<view class="re_look" @click="open_msg()">
				再次查看
			</view>
		</view>
		
		<view class="" :style="{'padding': type!=3 ? '0 30rpx' : '0'}">
			<view class="dantop" v-if="form.order_info">
				<image :src="form.order_info.writer.pic | formatImgUrl" class="head" mode=""></image>
				<view class="dancen">
					<view class="ytop">
						<view class="dantitle">
							{{form.order_info.writer.username}}
						</view>
						
						<image
							:src="$options.filters.formatImgUrl(userInfo.writer_level.is_active?userInfo.writer_level.level.image:userInfo.writer_level.level.hide_img)"
							@click="$go('/pages/user/grade?uid='+userInfo.membe_id)" class="danpic" mode="" v-if="userInfo.is_writer">
						</image>
						
						
						<image
							:src="$options.filters.formatImgUrl(userInfo.user_level.active_day>0?userInfo.user_level.level.image:userInfo.user_level.level.hide_img)"
							class="danji" mode="" v-if="userInfo.is_vip&&userInfo.user_level.is_active"></image>
					<!-- _that.form.order_info.writer.username -->
					</view>
					<view class="qitxt">
						{{form.ctime}}
					</view>
				</view>
			</view>
			<view :class="form.order_info&&form.order_info.status==3?'wenben':'wenben_ok'">
				<rich-text style="z-index: -1;font-weight: 600;" :nodes="form.title"></rich-text>
			</view>
			<view :class="form.order_info&&form.order_info.status==3?'wenben':'wenben_ok'">
				<rich-text style="z-index: -1;" :nodes="form.row"></rich-text>
			</view>
			
			<image :src="item | formatImgUrl" class="fupic" mode="widthFix" v-for="item in form.img"
				@click="$common.previewImage(item,form.img)"></image>
			
		</view>

		<view v-if="type!=3" class="dibu" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<!-- <view class="dili" @click="$go('/pages/my/appeal?oid='+id)">
				<image :src="'/images/ca.png' | formatImgUrl" class="dipic" mode=""></image>
				<view class="fatxt">
					发起申诉
				</view>
			</view> -->
			
			<block v-if="type == 10">
				<view class="dili" @click="$go('/showcase/showcase/editReason?oid=' + id)">
					<image :src="'/images/cd.png' | formatImgUrl" class="dipic" mode=""></image>
					<view class="fatxt">
						修改意见
					</view>
				</view>
				<view class="dilv dilv2" >
					<image :src="'/images/cc.png' | formatImgUrl" class="dipic" mode=""></image>
					<view class="quetxt">
						完成定稿
					</view>
				</view>
			</block>
			<block v-else>
				<view class="dili" @click="$go('/showcase/showcase/userEditReason?oid=' + id)">
					<image :src="'/images/cd.png' | formatImgUrl" class="dipic" mode=""></image>
					<view class="fatxt">
						修改意见
					</view>
				</view>
				<view class="dilv" @click="queren()">
					<image :src="'/images/cc.png' | formatImgUrl" class="dipic" mode=""></image>
					<view class="quetxt">
						完成定稿
					</view>
				</view>
			</block>
			
		</view>

		<!-- 确认定稿 -->
		<u-popup mode="center" :show="show" @close="close">
			<view class="mask">
				<view class="matitle">
					是否确定完成订单
				</view>
				<view class="matxt">
					完成后钱款将进入对方账户
				</view>
				<view class="quque">
					<view class="quli" @click="close()">
						<!-- <view class="quli" @click="testUrl()"> -->
						取消
					</view>
					<view class="quli quactive" @click="goToroom()">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		
		
		<u-popup :show="show_msg" mode="center" @close="close_msg" @open="open_msg">
			<view class="baibox" >
				<image  v-if="form.order_info" :src="form.order_info.writer.pic | formatImgUrl" class="baihead" mode=""></image>
				<view v-if="form.order_info" class="nickname">
					阅前须知
				</view>
				
				<view class="xutxt" >
					订单例文展示须知
				</view>
				<scroll-view class="gexu" scroll-y="true" >
					<view class="geli">
						<view class="getitle">
							在查看订单例文展示内容前，请您务必仔细阅读以下内容：
						</view>
						<view class="getxt">
							<view>
								1.订单例文展示内容均受到知识产权保护。在您定稿前阅读该内容时，不得擅自复制、传播、修改、转载或以其他方式使用这些内容，否则将被视为侵犯知识产权。
							</view>
							<view>
								2.订单例文展示内容仅供您在本平台上进行阅读。未经作者本人同意，您不得将其用于任何商业或非商业目的，包括但不限于复制、传播、修改、转载或以其他方式使用，否则将被视为侵犯作者的知识产权和隐私权。 
							</view>
							<view>
								3.在定稿前请与写手沟通好该稿件的版权相关内容，如因未确认版权归属导致争议，系写手与单主双方纠纷，与平台无关。 4.如确认定稿后想再次查阅稿件，可以从我的订单进入该订单，点击查看稿件。
							</view>
							<view>
								 4.如确认定稿后想再次查阅稿件，可以从我的订单进入该订单，点击查看稿件。
							</view>
						</view>
					</view>
					
				</scroll-view>
				
				
				<view class="fabox" @click="show_msg = false">
					<view class="fatxt">
						您已同意以上内容
					</view>
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show_msg = false" class="closepic" mode=""></image>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_msg:false,
				id: 0,
				form: {},
				userInfo: this.$db.get('userInfo'),
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				show: false,
				type:0
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.getInfo()
			} else {
				this.$common.errorToShow('参数异常')
			}
			if(e.type){
				this.type = e.type;
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

		},
		methods: {
			open_msg() {
				this.show_msg = true;
				// console.log('open');
			},
			close_msg() {
				console.log(111)
				this.show_msg = false
				// console.log('close');
			},
			queren(){
				this.show = true
			},
			getInfo() {
				let _that = this;
				this.$api.default.request('order/getCvInfo', {
					oid: this.id,
					is_order: true
				}, 'POST', false).then((res) => {
					if (res.code) {
						if (res.data) {
							_that.form = res.data
							// console.log(,777777774)
							
						} else {
							_that.form = {
								oid: _that.id,
								title: '',
								row: '',
								img: []
							}
						}
					}
				})
			},
			testUrl() {
				this.$store.commit('createConversationActive', this.form.order_info.writer_uid)
				uni.navigateTo({
					url: '/pages/tim/room?userType=1&showbox=2&uid=' + this.form.order_info.writer_uid + '&oid=' + this.form
						.oid
				})
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goToroom() {
				let _this = this;
				this.$api.default.request('order/userConfirmOrder', {
					id: this.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.$common.errorToShow(res.msg)
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/user/evaluate?&type=1&id=' + _this.id
							})
						},1000)
					
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		border-top: 8rpx solid rgba(242, 245, 242, 1);
		padding: 8rpx 30rpx;
		.top_c{
			width: 90%;
			padding-left: 5%;
			padding-right: 5%;
			height: 90rpx;
			background: #E5FFFB;
			margin-bottom: 40rpx;
			.text{
				font-family: Source Han Sans CN;
				font-size: 20rpx;
				letter-spacing: 0em;
				color: #45C4B0;
				width: 82%;
				float: left;
			}
			.re_look{
				float: right;
				width: 92rpx;
				height: 30rpx;
				border-radius: 126px;
				/* 自动布局 */
				flex-direction: column;
				text-align: center;
				line-height:30rpx ;
				border: 1px solid #45C4B0;
				font-family: Source Han Sans CN;
				font-size: 16rpx;
				letter-spacing: 0em;
				color: #45C4B0;
			}
			
		}
		.dantop {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;

			.head {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.dancen {
				padding-left: 12rpx;

				.ytop {
					display: flex;
					align-items: center;

					.dantitle {
						padding-bottom: 8rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0em;
						color: #3D3D3D;
					}

					.danpic{
						width: 100rpx ;
						height: 43rpx;
					}
					.danji{
						width:100rpx;
						height: 43rpx;
					}
				}

				.qitxt {
					font-size: 24rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #999999;
				}
			}

		}

		.wenben {
			font-size: 24rpx;
			line-height: 34rpx;
			padding-bottom: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			color: #3D3D3D;
			background: url('https://cdnauth.dreamyuewen.com/images/shuiyin.png');
			background-color: rgba(255, 255, 255, 0.1);
			background-size: 10%;
			z-index: 1;
		}
		
		.wenben_ok {
			background: #fff;;
		}
		
		
		.fupic {
			width: 100%;
			margin-bottom: 20rpx;
		}
		
		

		.dibu {
			position: fixed;
			background-color: #ffffff;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;

			.dili {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 330rpx;
				height: 60rpx;
				border-radius: 4px;
				box-sizing: border-box;
				border: 1px solid #3D3D3D;
				margin: 0 15rpx;
			}

			.dipic {
				width: 32rpx;
				height: 32rpx;
			}

			.fatxt {
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-left: 8rpx;
			}

			.quetxt {
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				font-weight: bold;
				color: #ffffff;
				padding-left: 8rpx;
			}

			.dilv {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 330rpx;
				height: 60rpx;
				border-radius: 4px;
				border: 1px solid #45C4B0;
				background: #45C4B0;
				margin: 0 15rpx;
			}
			
			.dilv2{
				background: #999;
				border: 1px solid #999;
				color: #fff;
			}
		}

		.mask {
			background-color: #ffffff;
			width: 534rpx;
			border-radius: 8px;
			padding-top: 48rpx;

			.matitle {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-bottom: 6rpx;
				line-height: 46rpx;
			}

			.matxt {
				font-size: 24rpx;
				font-weight: normal;
				text-align: center;
				letter-spacing: 0em;
				color: #999999;
				line-height: 34rpx;
				padding-bottom: 50rpx;
			}

			.quque {
				display: flex;
				align-items: center;
				border-top: 1px solid rgba(153, 153, 153, 0.1);

				.quli {
					width: 50%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.quactive {
					background: rgba(69, 196, 176, 0.05);
				}
			}
		}
		
		.closepic {
			width: 50rpx;
			height: 50rpx;
			margin: 40rpx auto 0;
		}
			
		.baibox {
			background-color: #ffffff;
			width: 474rpx;
			border-radius: 8px;
			opacity: 1;
			padding: 100rpx 30rpx 40rpx;
			position: relative;
			
			.baihead {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				position: absolute;
				top: -80rpx;
				left: 52%;
				margin-left: -80rpx;
			}
		
			.nickname {
				font-size: 32rpx;
				padding-bottom: 8rpx;
				font-weight: bold;
				text-align: center;
				color: #3D3D3D;
			}
		
			.xutxt {
				font-size: 24rpx;
				text-align: center;
				color: #999999;
				padding-bottom: 28rpx;
			}
		
			.gexu {
				padding-bottom: 20rpx;
				max-height: 450rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				margin-bottom: 20rpx;
		
				.geli {
			
					padding-bottom: 20rpx;
		
					.getitle {
						font-size: 24rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						flex-shrink: 0;
					}
		
					.getxt {
						padding-top: 20rpx;
						font-size: 22rpx;
						color: #999999;
						line-height: 35rpx;
						view{
							margin-top: 20rpx;
							&:first-child{
								margin-top: 0px
							}
						};
					}
				}
			}
		
			.fabox {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 454rpx;
				height: 86rpx;
				border-radius: 8px;
				opacity: 1;
				background: #f2f5f2;
				margin-top: 20rpx;
		
				.fapic {
					width: 40rpx;
					height: 40rpx;
				}
		
				.fatxt {
					font-size: 28rpx;
					font-weight: 500;
					padding-left: 14rpx;
					letter-spacing: 0em;
					color: #999;
				}
			}
		
		}
		
	}
</style>